<template>
  <div class="chart-wrapper" ref="scatterMap"></div>
</template>

<script>
import echarts from "echarts";
import { onMounted, onBeforeUnmount, ref, watch } from "vue";
import { debounce, getGeoJson } from "@/utils/index.js";
import useResize from "@/componentApi/useResize.js";
import { selectCityData } from "@/api/chart";

export default {
  name: "scatterMap",
  setup() {
    let {
      abcode,
      year,
      parentInfo,
      setCommitRegion,
      getRegion,
    } = useResize();
    const regionMap = ['黄浦','徐汇','长宁','静安','普陀','虹口','杨浦','闵行','宝山','嘉定','浦东','金山','松江','青浦','奉贤','崇明'];
    let myChart = ref(null);
    let geoJson = ref(null);
    const scatterMap = ref(null);
    const resizeHandler = debounce(() => {
      if (myChart) {
        myChart.resize();
      }
    }, 200);

    onMounted(() => {
      getMapJson();
      window.addEventListener("resize", resizeHandler);
    });
    onBeforeUnmount(() => {
      window.removeEventListener("resize", resizeHandler);
    });

    //通过高德获取geoJson数据
    const getMapJson = async () => {
      geoJson.value = await getGeoJson(abcode.value, geoJson.value);
      getMapData();
    };

    //模拟接口，获取echarts数据
    const getMapData = async () => {
      let { data } = await selectCityData({
        abcode: abcode.value,
        year: year.value,
      });
      initEcharts(data);
    };

    //渲染echarts图
    const initEcharts = (data) => {
      myChart = echarts.init(scatterMap.value || scatterMap);
      if (parentInfo.value.length === 1) {
        echarts.registerMap("shanghai", geoJson.value); //注册
      } else {
        echarts.registerMap("map", geoJson.value); //注册
      }
      myChart.setOption(
        {
          baseOption: {
            animation: true,
            animationDuration: 900,
            animationEasing: "cubicInOut",
            animationDurationUpdate: 900,
            animationEasingUpdate: "cubicInOut",
            title: {
              left: "center",
              top: 0,
              text: "上海地图",
              textStyle: {
                color: "rgb(179, 239, 255)",
                fontSize: 16,
              },
              padding: 20
            },
            tooltip: {
              trigger: "item",
              formatter: (p) => {
                let val = p.value;
                if (window.isNaN(val)) {
                  val = 0;
                }
                // let txtCon =
                //   "<div style='text-align:left'>" +
                //   p.name +
                //   ":<br />销售额：" +
                //   val.toFixed(2) +
                //   "万</div>";
                let txtCon = "<div style='text-align:left'>" + p.name + "</div>"
                return txtCon;
              },
            },
            toolbox: {
              feature: {
                restore: {
                  show: false,
                },
                dataView: {
                  show: false,
                },
                saveAsImage: {
                  name: "上海地图",
                  show: false
                },
                dataZoom: {
                  show: false,
                },
                magicType: {
                  show: false,
                },
              },
              iconStyle: {
                normal: {
                  borderColor: "#1990DA",
                },
              },
              top: 0,
              right: 0,
            },
            series: [
              {
                name: year.value,
                type: "map",
                map: parentInfo.value.length === 1 ? "shanghai" : "map",
                roam: true,
                zoom: 1.25,
                tooltip: {
                  trigger: "item",
                  formatter: (p) => {
                    let val = p.value;
                    if (window.isNaN(val)) {
                      val = 0;
                    }
                    // let txtCon =
                    //   "<div style='text-align:left'>" +
                    //   p.name +
                    //   ":<br />销售额：" +
                    //   val.toFixed(2) +
                    //   "万</div>";
                    let txtCon = "<div style='text-align:left'>" + p.name + "</div>"
                    return txtCon;
                  },
                },
                label: {
                  normal: {
                    show: true,
                    color: "rgb(249, 249, 249)", //省份标签字体颜色
                  },
                  emphasis: {
                    show: true,
                    color: "#f75a00",
                  },
                },
                itemStyle: {
                  normal: {
                    areaColor: "#24CFF4",
                    borderColor: "#53D9FF",
                    borderWidth: 1.3,
                    shadowBlur: 15,
                    shadowColor: "rgb(58,115,192)",
                    shadowOffsetX: 7,
                    shadowOffsetY: 6,
                  },
                  emphasis: {
                    areaColor: "#8dd7fc",
                    borderWidth: 1.6,
                    shadowBlur: 25,
                  },
                },
                data: data,
              },
            ],
          },
        },
        true
      );

      myChart.off("timelinechanged");
      myChart.getZr().off("click");
      myChart.getZr().on("click", (params) => {
        if (params.target && params.target.dataIndex) {
          const index = params.target.dataIndex - 34
          setCommitRegion(regionMap[index])
        } else {
          setCommitRegion("全市")
        }
      });
    };

    watch(
      parentInfo,
      (nl, ol) => {
        getMapJson();
      },
      { lazy: false, deep: true }
    );

    return {
      scatterMap,
      myChart,
      parentInfo,
    };
  },
};
</script>
